import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { ChakraProvider, extendTheme } from '@chakra-ui/react'
import LagouComponents from './components/Lagou'
import Form from './Form';
import { BrowserRouter as Router } from 'react-router-dom';
import Header from './Header';
import { Main } from './Main';


const theme = extendTheme({
  config: {
    initialColorMode: 'light',
    useSystemColorMode: true
  },
  components: {
    ...LagouComponents
  }
})
ReactDOM.render(
  <Router><Root /></Router>,
  document.getElementById('root')
);

function Root() {
  console.log('theme:', theme.config, theme)
  return <ChakraProvider theme={theme}    >
    <Header />
    <Main />
  </ChakraProvider>

}

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
